<template>
  <div class="EWManagement">
        <div class="overflowX flexBetween">
          <div style="width:88%;height:100%">
            <div class="flexBetween topBigDiv" style="height:49%">
              <div class="homePageCard MapContent">
                <mapContent ref="mapContent" mapId="mldsy"></mapContent>
              </div>
              <div style="height:100%;width: 70%;">
                <div class="titleName">
                  {{responseName}}
                </div>
                <div class="flexBetween padding0-10" style="height:100%">
                  <div style="width:32%">
                    <ResponseAndEvent @ReportEvents="ReportEvents" @ChooseResponse="ChooseResponse"></ResponseAndEvent>
                  </div>
                  <div  style="width:37%">
                    <DisasterStatistics :emergencyEventIds="emergencyEventIds" :emergencyEventIndex="emergencyEventIndex"></DisasterStatistics>
                  </div>
                  <div  style="width:30%">
                    <EDResourcesLiveVideo></EDResourcesLiveVideo>
                  </div>
                </div>
              </div>
            </div>
            <div class="flexBetween" style="padding-right:10px;height:48%">
              <div style="width:26.3%"><EmergencyRepair></EmergencyRepair></div>
              <div style="width:21%"><EDResourcesTeam></EDResourcesTeam></div>
              <div style="width:21%"><EDResourcesCar></EDResourcesCar></div>
              <div style="width:12%"><EDResourcesEquipment></EDResourcesEquipment></div>
              <div style="width:18%"><EDResourceReserve></EDResourceReserve></div>
            </div>
          </div>
          <div style="width:12%">
            <TimeLine :timelinedata="timelinedata"></TimeLine>
          </div>
        </div>
  </div>
</template>

<script>
import "@/assets/style/EmergencyDisposal/EDManagement.less";
import mapContent from "../SystemHomepage/HomePageContent/mapContent.vue";
import DisasterStatistics from "./HomePageContent/DisasterStatistics.vue";
import EDResourcesLiveVideo from "./HomePageContent/EDResourcesLiveVideo.vue";
import EDResourcesCar from "./HomePageContent/EDResourcesCar.vue";
import EDResourceReserve from "./HomePageContent/EDResourceReserve.vue";
import EDResourcesEquipment from "./HomePageContent/EDResourcesEquipment.vue";
import EDResourcesTeam from "./HomePageContent/EDResourcesTeam.vue";
import EmergencyRepair from "./HomePageContent/EmergencyRepair.vue";
import ResponseAndEvent from "./HomePageContent/ResponseAndEvent.vue";
import TimeLine from "./HomePageContent/TimeLine.vue";
import { GetFlowList, GetResponse } from "@/api/common.js";
export default {
  name: "EDManagement",
  components: {
    mapContent,
    DisasterStatistics,
    EDResourcesLiveVideo,
    EDResourcesCar,
    EDResourceReserve,
    EDResourcesEquipment,
    EDResourcesTeam,
    EmergencyRepair,
    ResponseAndEvent,
    TimeLine
  },
  data() {
    return {
      timelinedata: [],
      responseName: "",
      emergencyEventIndex: 0,
      emergencyEventIds: ""
    };
  },
  mounted() {
    this.defaultflow();
  },
  methods: {
    ChooseResponse(id, name, emergencyEventIds, index) {
      // 点击对应命令单切换流程
      this.responseName = name;
      this.emergencyEventIndex = index;
      this.emergencyEventIds = emergencyEventIds;
      this.getflow(id);
    },
    ReportEvents(res) {
      const pointData = res;
      const mapref = this.$refs.mapContent;
      mapref.drawPoint(pointData);
    },
    async defaultflow() { //  默认取第一条命令单的流程
      const res = await GetResponse();
      this.getflow(res[0].id);
      this.responseName = res[0].responseName;
    },
    async getflow(id) { // 右侧业务流程
      const res = await GetFlowList({ sourceInfoId: id });
      this.timelinedata = res.data;
    }
  }
};
</script>

<style scoped lang="less">
.EWManagement {
  width: 100%;
  height: calc(1080px - 84px - 78px);
  overflow: scroll;
}
// .EWManagement::-webkit-scrollbar {
//   display: none; /* Chrome Safari */
// }
.homePageCard.MapContent {
  width: 30%;
  height: 100%;
  position: relative;
}
.topBigDiv{
  margin-bottom: 0.5%;
}
.titleName {
  text-align: center;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.85);
  height: 10%;
  font-weight: bold;
  letter-spacing: 1.5px;
}
.overflowX {
  width: 150%;
  height: 100%;
}
div::-webkit-scrollbar{
  height: 15px;
  width: 0;
}
</style>
